<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import {searchArticle, searchKnowledgeBase,} from "@/api/request.js";
import {goBackToThePreviousPage} from "@/util/common.js";
import ArticleItem from "@/components/articleItem.vue";
import axios from "axios";
import router from "@/router/index.js";

const searchValue = ref('')
const searchArticleResults = ref([])
const searchBaseResults = ref([])
const active = ref(0)
const onSearch = () => {
  if (searchValue.value === '') {
    showToast('请输入搜素关键词')
    return false
  }

  if (active.value === 0) {
    searchArticle({
      keyword: searchValue.value
    }).then(res => {
      console.log(res.data)
      searchArticleResults.value = []
      searchArticleResults.value.push(...res.data)
    })
  } else {
    searchKnowledgeBase({
      keyword: searchValue.value
    }).then(res => {
      console.log(res.data)
      searchBaseResults.value = []
      searchBaseResults.value.push(...res.data)
      console.log(searchBaseResults.value)
    })
  }
};
</script>

<template>
  <van-search v-model="searchValue" action-text="搜索" placeholder="请输入搜索关键词" show-action @search="onSearch">
    <template #left>
      <div style="padding-right: .5rem">
        <van-icon name="arrow-left" @click="goBackToThePreviousPage"/>
      </div>
    </template>
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <div class="app-container">
    <van-tabs v-model:active="active">
      <van-tab title="文章">
        <div class="display-box">
          <div v-if="searchArticleResults.length === 0">
            <van-empty description="未搜索到数据" image="network" image-size="5rem"/>
          </div>
          <van-list v-else>
            <template v-for="(item, index) in searchArticleResults" :key="index">
              <ArticleItem :article="item.article" :knowledge-bases="item.knowledgeBases"
                           :user="item.user"></ArticleItem>
            </template>
          </van-list>
        </div>
      </van-tab>
      <van-tab title="知识库">
        <div class="display-box">
          <div v-if="searchBaseResults.length === 0">
            <van-empty description="未搜索到数据" image="network" image-size="5rem"/>
          </div>
          <template v-for="item in searchBaseResults">
            <div class="knowledge-base-item" @click="router.push({ path: `/knowledge-base-detail/${item.knowledgeBase.id}`})">
              <div class="left">
                <div :style="{ backgroundColor: item.knowledgeBase.backgroundColor }" class="icon">
                  <van-image :src="`${axios.defaults.baseURL}/icon/${item.knowledgeBase.icon}`" height="2.5rem"
                             width="2.5rem"/>
                </div>
              </div>
              <div class="right">
                <div class="title">{{ item.knowledgeBase.name }}</div>
<!--                <div v-if="item.user.id !== 1" class="creator">创建者：{{ item.user.username }}</div>-->
                <div class="creator">系统知识库</div>
                <div class="desc">{{ item.knowledgeBase.createTime }}</div>
              </div>
            </div>
          </template>
        </div>
      </van-tab>
    </van-tabs>
  </div>

</template>

<style lang="scss" scoped>
.app-container {
  padding: 0 0.5rem;

  .van-tabs {
    margin-top: 0.5rem;
  }

  .display-box {
    padding: 0.5rem;
    background-color: #fff;

    .knowledge-base-item {
      display: flex;
      padding: 0.5rem;
      border-bottom: 1px solid #f5f5f5;

      .left {
        width: 4rem;

        .icon {
          width: 4rem;
          height: 4rem;
          border-radius: 0.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .right {
        flex: 1;
        padding-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 1rem;
          font-weight: bold;
        }

        .creator, .desc {
          font-size: 0.8rem;
          color: #999;
        }

        .icon {
        }
      }

      & + .knowledge-base-item {
        margin-top: 0.5rem;
        border-top: 1px solid #f5f5f5;
      }
    }
  }
}
</style>